<template>
<div class="use-home">
  <div class="use">
    <div class="use-title">{{$t('user.home5')}}</div>
    <div class="use-menu">
        <div class="sta-tab">
          <div>{{$t('user.statistics1')}}</div>
          <div>BNB</div>
          <div>{{$t('user.statistics2')}}</div>
        </div>
        <div class="sta-tab-list">
          <div class="sta-tab-list-line" v-for="(val,index) in tableData" :key="index">
            <div>{{val.address}}</div>
            <div>{{val.BNB}}</div>
            <div>{{val.sun}}</div>
          </div>
        </div>
    </div>
    <div class="use-return" @click="jump">{{$t('user.use59')}}</div>
  </div>
</div>
</template>

<script>
import { PoolTopInfo  } from '../bsc/bnb.js'
export default {
  name: 'statistics',
  data () {
    return {
      tableData: [
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},
        {address: '',BNB: '',sun: ''},

      ],
      pollba:0,
    }
  },  
  mounted() {
    this.pollba = sessionStorage.getItem("pollba");
    this.grtList();
  },
  computed: {
  },
  methods: {
      /* 小数处理 */
    Decimal(Numero){
      let Nume = Numero.toString();
    //   console.log(Nume);
      let arr = Nume.split('.');
      let isindex = Nume.indexOf('.')
      let end = '';
      if(isindex != -1){
        if(arr[1].length>6){
          end =  arr[1].substring(0,6)
           return arr[0]+"."+end;
        }else{
        return Numero;
      }
       
      }else{
        return Numero;
      }
    },
    jump(){      
      this.$emit('close');
    },
    /* 穿回来的数据 */
    grtList(){
        let _this = this
        PoolTopInfo().then(res=>{
                console.log(res)
            for (let i = 0; i < res.addrs.length; i++) {
                if (res.addrs[i].substr(2) == '0000000000000000000000000000000000000000') break;
                    let disLength = res.addrs[i].length;
                    let usermy = res.addrs[i].substring(0,4)+"..."+ res.addrs[i].substring(disLength-4,disLength);
                    this.$set(_this.tableData[i],"address",usermy);
                    this.$set(_this.tableData[i],"BNB",this.Decimal(this.scientificToNumber(parseFloat(res.deps[i]))));
                    console.log(_this.tableData)
                    this.$set(_this.tableData[i],"sun",this.Decimal(this.scientificToNumber(this.pollba * 1/100)));
            }
        })
    },
    scientificToNumber (inputNumber) {
        if (isNaN(inputNumber)) {
                return inputNumber
            }
            
            inputNumber = '' + inputNumber
            inputNumber = parseFloat(inputNumber)
            let eformat = inputNumber.toExponential() // 转换为标准的科学计数法形式（字符串）
            let tmpArray = eformat.match(/\d(?:\.(\d*))?e([+-]\d+)/) // 分离出小数值和指数值
            let number = inputNumber.toFixed(Math.max(0, (tmpArray[1] || '').length - tmpArray[2]))
            return number
    }
  }
}
</script>

<style scoped lang="scss">
.redClo{
  color: #FC1212!important;
}
@media only screen and (min-width: 0px) and (max-width: 639px){
  .paddingBot{
    padding-bottom: 20px!important;
  }
  .use{
    width: 100%;
    height: 100vh;
    padding: 20px 12px;
    background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    padding-top: 30px;
    .work-table{
      margin: 15px 0px;
      border: 1px solid rgba(229, 123, 59, .5);
      display: flex;
      justify-content: space-between;
      >div{
        padding: 0px 15px;
        >div{
          padding: 8px 0px;
        }
      }
      .work-table1,.work-table2{
        border-right: 1px solid rgba(229, 123, 59, .5);
      }
    }
    .work-border{
      margin: 15px 0px;
      border: 1px solid rgba(229, 123, 59, .5);
      padding: 10px 20px;
      >div{
        padding: 7px 0px;
      }
    }
    .use-return{
      width: 200px;
      height: 40px;
      line-height: 38px;
      background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
      border: 1px solid #514822;
      margin-right: 15px;
      border-radius: 20px;
      position: relative;
      top: -38px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
    }
    .use-title{
      width: 200px;
      height: 30px;
      font-size: 24px;
      font-weight: bold;
      color: #E57B3B;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 30px;
    }
    .use-menu{
      width: 100%;
      padding: 60px 30px;
      background-image: url(../assets/sub-box-bg1.png);
      background-size:100% 100%;
      position: relative;
      top: -19px;
      .sta-tab{
        width: 100%;
        height: 40px;
        line-height: 38px;
        background: #E1713F;
        display: flex;
        justify-content: space-around;
        color: #000;
        font-weight: bold;
        font-size: 14px;
      }
      .sta-tab-list{        
        border: 1px solid rgba(229, 123, 59, .5);
        border-top: none;
        color: #fff;
        .sta-tab-list-line{
          display: flex;
          >div{
            width: 33%;
            height: 30px;
            text-align: center;
            padding: 8px 0px;
            border-right: 1px solid rgba(229, 123, 59, .5);
          }
          >div:nth-child(3){
            border-right: none;
          }
        }
      }
    }
    .use-title-smal{
      font-size: 14px;
      padding-bottom: 12px;
    }
    .use-text{
      font-size: 10px;
      padding-bottom: 4px;
    }
    .use-title-bg{
      width: 162px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      background: #E57B3B;
      transform:skew(-20deg);
      margin: 0px auto;
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
      color: #0C0407;
      font-weight: bold;
    }
    .use-text-menu{
      padding: 10px 0px;
      .use-text-top{
        >span:nth-child(1){
          display: inline-block;
          height: 20px;
          line-height: 18px;
          background: #E57B3B;
          padding: 0px 5px;
          color: #0C0407;
          font-size: 13px;
          font-weight: bold;
          margin-right: 2px;
        }
      }
      .use-text-line{
        padding: 5px 0px;
      }
    }
  }
}
// pc端样式
@media only screen and (min-width: 640px) {
  .use-home{
    width: 100%;
    background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    .use{
        width: 700px;
        height: 100vh;
        margin: 0 auto;
        padding: 80px 40px;
        .use-return{
          width: 200px;
          height: 40px;
          line-height: 38px;
          background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
          border: 1px solid #514822;
          margin-right: 15px;
          border-radius: 20px;
          position: relative;
          top: -10px;
          text-align: center;
          margin: 0 auto;
          font-size: 16px;
          text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
        }
        .use-title{
          font-size: 24px;
          font-weight: bold;
          color: #E57B3B;
          text-align: center;
        }
        .use-menu{
          width: 100%;
          padding: 60px 60px;
          background-image: url(../assets/sub-box-bg1.png);
          background-size:100% 100%;
        }
        .use-title-smal{
          font-size: 14px;
          padding-bottom: 12px;
        }
        .use-text{
          font-size: 10px;
          padding-bottom: 4px;
        }
        .use-title-bg{
          width: 162px;
          height: 26px;
          line-height: 26px;
          font-size: 16px;
          background: #E57B3B;
          transform:skew(-20deg);
          margin: 0px auto;
          margin-top: 20px;
          margin-bottom: 20px;
          text-align: center;
          color: #0C0407;
          font-weight: bold;
        }
        .use-text-menu{
          padding: 10px 0px;
          .use-text-top{
            >span:nth-child(1){
              display: inline-block;
              height: 20px;
              line-height: 18px;
              background: #E57B3B;
              padding: 0px 5px;
              color: #0C0407;
              font-size: 13px;
              font-weight: bold;
              margin-right: 2px;
            }
          }
          .use-text-line{
            padding: 5px 0px;
          }
        }
      }
  }
  .use{
    width: 100%;
    height: 100vh;
    padding: 20px 12px;
    // background-image: url(../assets/sub-bg.jpg);
    background-size:100% 100%;
    font-size: 12px;
    text-align: left;
    padding-top: 30px;
    .work-table{
      margin: 15px 0px;
      border: 1px solid rgba(229, 123, 59, .5);
      display: flex;
      justify-content: space-between;
      >div{
        padding: 0px 15px;
        >div{
          padding: 8px 0px;
        }
      }
      .work-table1,.work-table2{
        border-right: 1px solid rgba(229, 123, 59, .5);
      }
    }
    .work-border{
      margin: 15px 0px;
      border: 1px solid rgba(229, 123, 59, .5);
      padding: 10px 20px;
      >div{
        padding: 7px 0px;
      }
    }
    .use-return{
      width: 200px;
      height: 40px;
      line-height: 38px;
      background-image: linear-gradient(to bottom, #E75607, #FF9C00, #FFD89A);
      border: 1px solid #514822;
      margin-right: 15px;
      border-radius: 20px;
      position: relative;
      top: -38px;
      text-align: center;
      margin: 0 auto;
      font-size: 16px;
      text-shadow: 0px 1px 5px rgba(12, 4, 7, 0.75);
    }
    .use-title{
      width: 200px;
      height: 30px;
      font-size: 24px;
      font-weight: bold;
      color: #E57B3B;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 30px;
    }
    .use-menu{
      width: 100%;
      padding: 60px 30px;
      background-image: url(../assets/sub-box-bg1.png);
      background-size:100% 100%;
      position: relative;
      top: -19px;
      .sta-tab{
        width: 100%;
        height: 40px;
        line-height: 38px;
        background: #E1713F;
        display: flex;
        justify-content: space-around;
        color: #000;
        font-weight: bold;
        font-size: 14px;
      }
      .sta-tab-list{        
        border: 1px solid rgba(229, 123, 59, .5);
        border-top: none;
        color: #fff;
        .sta-tab-list-line{
          display: flex;
          >div{
            width: 33%;
            height: 30px;
            text-align: center;
            padding: 8px 0px;
            border-right: 1px solid rgba(229, 123, 59, .5);
          }
          >div:nth-child(3){
            border-right: none;
          }
        }
      }
    }
    .use-title-smal{
      font-size: 14px;
      padding-bottom: 12px;
    }
    .use-text{
      font-size: 10px;
      padding-bottom: 4px;
    }
    .use-title-bg{
      width: 162px;
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      background: #E57B3B;
      transform:skew(-20deg);
      margin: 0px auto;
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
      color: #0C0407;
      font-weight: bold;
    }
    .use-text-menu{
      padding: 10px 0px;
      .use-text-top{
        >span:nth-child(1){
          display: inline-block;
          height: 20px;
          line-height: 18px;
          background: #E57B3B;
          padding: 0px 5px;
          color: #0C0407;
          font-size: 13px;
          font-weight: bold;
          margin-right: 2px;
        }
      }
      .use-text-line{
        padding: 5px 0px;
      }
    }
  }
}
</style>
